<template>
  <div class="score_form body_bgi full p_10 relative scroll_box overflow_y_auto">
    <div class="w_full text_center p_10">
      <div class="fs_1_5rem main_text ls_5 font_zh">剪羊毛比赛</div>
      <div class="font_number fs_70 main_text" v-if="personNumber">
        {{ personNumber }} 
        <span class="fs_1rem color_888">{{ personName }}</span> 
      </div> 
    </div>

    <van-form v-if="isScore == 0">
      <van-field
        readonly
        clickable
        name="剪刀痕迹与皮肤破损度"
        label="剪刀痕迹与皮肤破损度："
        label-width="230"
        :value="scoreForm.scissorMarks"
        placeholder="请选择分数"
        @click="selectValue('scissorMarks')"
        :rules="[{required: true }]"
      />
      <van-field
        readonly
        clickable
        name="重剪毛"
        label="重剪毛："
        label-width="230"
        :value="scoreForm.doubleShearing"
        placeholder="请选择分数"
        @click="selectValue('doubleShearing')"
        :rules="[{required: true }]"
      />
      <van-field
        readonly
        clickable
        name="羊身剪净和羊毛清理程度"
        label="羊身剪净和羊毛清理程度："
        label-width="230"
        :value="scoreForm.sheepBodyClean"
        placeholder="请选择分数"
        @click="selectValue('sheepBodyClean')"
        :rules="[{required: true }]"
      />
      <van-field
        readonly
        clickable
        name="善待参赛羊"
        label="善待参赛羊："
        label-width="230"
        :value="scoreForm.beKindSheep"
        placeholder="请选择分数"
        @click="selectValue('beKindSheep')"
        :rules="[{required: true }]"
      />
      <van-field
        readonly
        clickable
        name="毛套整理"
        label="毛套整理："
        label-width="230"
        :value="scoreForm.maoArrange"
        placeholder="请选择分数"
        @click="selectValue('maoArrange')"
        :rules="[{required: true }]"
      />
      <van-popup v-model="isShowPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="pickerColumns"
          @confirm="confirmPicker"
          @cancel="isShowPicker = false"
        />
      </van-popup>

      <div style="margin: 16px;">
        <van-button 
          round block 
          type="info" size="large" 
          native-type="submit" 
          color="linear-gradient(to bottom, #f7e0cf, #fa964e)"
          @click="clickSubmit()">确认评分
        </van-button>
      </div>
    </van-form>

    <!-- 提交完成后 等待评分 -->
    <div class="w_full h_full-350 ph_10" v-else>
      <div class="w_full h_50 lh_50 text_center fs_1_5rem main_text">
        您的评分: <span class="fw_bold">{{ my.totalScore }} </span> 分
      </div>

      <div class="w_full h_60_p overflow_y_auto bgc_fff border_radius_10 mt_10">
        <!-- 显示 所有 评委 评分 -->
        <!-- <div 
          class="w_full h_60 lh_60 border_b_1_s_eee fs_22" 
          v-for="(item, index) in scoreList" :key="index"
          @click="showScoreDetail(item)"
        >
          <div class="w_full flex_row_between ph_30" v-if="item.judgeId == myJudgeId">
            <div>评分：{{ item.totalScore }} </div>
          </div>

          <div class="w_full flex_row_between ph_30" v-else>
            <div>{{ index + 1 }}</div>
            <div>评委: {{ item.judgeId }} </div>
            <div>评分：{{ item.totalScore }} </div>
          </div>
        </div> -->

        <div class="w_full h_50 lh_50 border_b_1_s_ccc ph_10 fs_1rem flex_row_between">
          <div class="w_80_p text_left pl_10">剪刀痕迹与皮肤破损度：</div> <div class="w_10_p pl_10">{{ my.scissorMarks }}</div>
        </div>
        <div class="w_full h_50 lh_50 border_b_1_s_ccc ph_10 fs_1rem flex_row_between">
          <div class="w_80_p text_left pl_10">重剪毛：</div> <div class="w_10_p pl_10">{{ my.doubleShearing }}</div>
        </div>
        <div class="w_full h_50 lh_50 border_b_1_s_ccc ph_10 fs_1rem flex_row_between">
          <div class="w_90_p text_left pl_10">羊身剪净和羊毛清理程度：</div> <div class="w_10_p pl_10">{{ my.sheepBodyClean }}</div>
        </div>
        <div class="w_full h_50 lh_50 border_b_1_s_ccc ph_10 fs_1rem flex_row_between">
          <div class="w_80_p text_left pl_10">善待参赛羊：</div> <div class="w_10_p pl_10">{{ my.beKindSheep }}</div>
        </div>
        <div class="w_full h_50 lh_50 border_b_1_s_ccc ph_10 fs_1rem flex_row_between">
          <div class="w_80_p text_left pl_10">毛套整理：</div> <div class="w_10_p pl_10">{{ my.maoArrange }}</div>
        </div>
      </div>

      <div class="w_full h_100 lh_100 ph_30 mt_30 mb_50">
        <!-- <van-button round block type="primary" class="ls_2" native-type="submit" @click="refreshScore()">刷新评分</van-button> -->
        <div class="w_full h_30"></div>
        <van-button 
          round block type="info" class="ls_2" 
          color="linear-gradient(to bottom, #f7e0cf, #fa964e)"
          @click="goToPage(`/person-list/${roomId}/${contestId}`)">返回选手列表
        </van-button>
      </div>
    </div>

    <van-dialog v-model="isShowDialog" title="确认提交评分？" show-cancel-button @confirm="submitScoreForm">
      <div class="w_full p_10 fs_1rem">
        <div class="w_full flex_row_start pb_5 ph_10">
          <div class="w_70_p text_left">剪刀痕迹与皮肤破损度：</div>
          <div class="w_30_p text_right">{{ scoreForm.scissorMarks }}</div>
        </div> 
        <div class="w_full flex_row_start pb_5 ph_10">
          <div class="w_70_p text_left">重剪毛：</div>
          <div class="w_30_p text_right">{{ scoreForm.doubleShearing }}</div>
        </div>
        <div class="w_full flex_row_start pb_5 ph_10">
          <div class="w_70_p text_left">羊身剪净和羊毛清理程度：</div>
          <div class="w_30_p text_right">{{ scoreForm.sheepBodyClean }}</div>
        </div>
        <div class="w_full flex_row_start pb_5 ph_10">
          <div class="w_70_p text_left">善待参赛羊：</div>
          <div class="w_30_p text_right">{{ scoreForm.beKindSheep }}</div>
        </div>
        <div class="w_full flex_row_start ph_10">
          <div class="w_70_p text_left">毛套整理：</div>
          <div class="w_30_p text_right">{{ scoreForm.maoArrange }}</div>
        </div>
      </div>
    </van-dialog> 

    <van-dialog v-model="isShowsScoreDetailDialog" :title="formatScoreDetailTitle(scoreDetailForm.judgeId)" show-cancel-button @confirm="isShowsScoreDetailDialog=false">
      <div class="w_full p_10 fs_22">
        <div class="w_full flex_row_start pb_10">
          <div class="w_70_p pr_5 text_right">剪刀痕迹与皮肤破损度：</div>
          <div class="w_30_p pl_5 pt_3">{{ scoreDetailForm.scissorMarks }}</div>
        </div> 
        <div class="w_full flex_row_start pb_10">
          <div class="w_70_p pr_5 text_right">重剪毛：</div>
          <div class="w_30_p pl_5 pt_3">{{ scoreDetailForm.doubleShearing }}</div>
        </div>
        <div class="w_full flex_row_start pb_10">
          <div class="w_70_p pr_5 text_right">羊身剪净和羊毛清理程度：</div>
          <div class="w_30_p pl_5 pt_3">{{ scoreDetailForm.sheepBodyClean }}</div>
        </div>
        <div class="w_full flex_row_start pb_10">
          <div class="w_70_p pr_5 text_right">善待参赛羊：</div>
          <div class="w_30_p pl_5 pt_3">{{ scoreDetailForm.beKindSheep }}</div>
        </div>
        <div class="w_full flex_row_start">
          <div class="w_70_p pr_5 text_right">毛套整理：</div>
          <div class="w_30_p pl_5 pt_3">{{ scoreDetailForm.maoArrange }}</div>
        </div>
      </div>
    </van-dialog> 

    <van-dialog v-model="isShowRuleDialog" title="剪羊毛比赛评分标准" show-cancel-button @confirm="isShowRuleDialog=false">
      <div class="w_full h_80_p scrool_box overflow_y_auto p_10 fs_1rem">
        <p v-html="rule"></p>
      </div>
    </van-dialog> 

    <div 
      class="w_100 h_30 lh_30 text_center fs_1rem bgc_0000003a border_radius_5 absolute bottom_20 left_center main_color"
      @click="showRule()">评分标准
    </div> 
  </div>
</template>

<script>
  import { Toast, Dialog } from 'vant';
  import { savePersonScore, getPersonScoreDetail, getGuiZe } from '@/api/index.js'

  export default {
    name: 'PersonScore',
    data() {
      return {
        contestId: null,
        roomId: null,
        personId: null,
        personNumber: null,
        personName: null,
        isScore: 0,

        activeFormItem: null,

        scoreForm: {
          scissorMarks: null,
          doubleShearing: null,
          sheepBodyClean: null,
          beKindSheep: null,
          maoArrange: null,
        },

        isShowPicker: false,
        pickerColumns: [],
        
        isShowDialog: false,
        my: {},
        myJudgeId: null,
        scoreList: [],

        isShowsScoreDetailDialog: false,
        scoreDetailForm: {},

        isShowRuleDialog: false,
        rule: ''
      }
    },

    async mounted() {
      let contestId = this.$route.params.contestId
      let roomId = this.$route.params.roomId
      let personId = this.$route.params.personId
      let personNumber = this.$route.params.personNumber
      let personName = this.$route.params.personName
      let isScore = this.$route.params.isScore

      this.contestId = contestId
      this.roomId = roomId
      this.personId = personId
      this.personNumber = personNumber
      this.personName = personName
      this.isScore = isScore

      this.myJudgeId = JSON.parse(window.sessionStorage.user).id

      if (isScore == 1) {
        // 获取 选手评分详情
        this.getPersonScoreDetail(this.contestId, this.personId)
      }
    },
    methods: {
      // 校验输入的 值
      valideValue1(val) {
        return 0 <= val && val <= 20
      },
      valideValue2(val) {
        return 0 <= val && val <= 10
      },

      // 选择 值
      selectValue(form) {
        this.activeFormItem = form

        // 密度
        if (form == 'scissorMarks') {
          this.pickerColumns = [
            20,19,18,17,16,15,14,13,12,11,
            10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0
          ]
        // 弯曲度
        } else if (form == 'doubleShearing') {
          this.pickerColumns = [10, 8, 6]
        } else if (form == 'sheepBodyClean') {
          this.pickerColumns = [10, 8, 6]
        } else if (form == 'beKindSheep') {
          this.pickerColumns = [10, 8]
        } else if (form == 'maoArrange') {
          this.pickerColumns = [10, 8]
        } else {
          this.pickerColumns = []
        }

        this.isShowPicker = true
      },

      confirmPicker(val) {
        this.scoreForm[this.activeFormItem] = val
        this.isShowPicker = false
      },

      // 点击【提交】按钮， 显示确认框
      clickSubmit() {
        let validateResult = this.validateScoreForm()

        validateResult ? this.isShowDialog = true : Toast.fail('请检查表单！');
      },

      // 验证表单 内容
      validateScoreForm() {
        let result = ''
        for (let i in this.scoreForm) {
          // console.log('验证 : ', );
          if (this.scoreForm[i] === null) {
            result = false
            return 
          } else {
            result = true
          }
        }

        return result
      },

      // 提交评分
      async savePersonScore(params) {
        let res = await savePersonScore(params)
        try {
          if (res.code == 1000 && res.message == 'success') {
            Toast.success('提交成功！');
            this.isScore = 1

            this.scoreForm = {
              scissorMarks: null,
              doubleShearing: null,
              sheepBodyClean: null,
              beKindSheep: null,
              maoArrange: null,
            }

            // 获取 选手评分详情
            this.getPersonScoreDetail(this.contestId, this.personId)
          }
        } catch(err) {
          console.log('选手评分提交失败 : ', err);
        }
      },

      // 提交评分, 显示查看评分界面
      submitScoreForm() {
        let params = {
          contestId: this.contestId,
          personId: this.personId,
          scissorMarks: parseInt(this.scoreForm.scissorMarks),
          doubleShearing: parseInt(this.scoreForm.doubleShearing),
          sheepBodyClean: parseInt(this.scoreForm.sheepBodyClean),
          beKindSheep: parseInt(this.scoreForm.beKindSheep),
          maoArrange: parseInt(this.scoreForm.maoArrange)
        }

        this.savePersonScore(params)
      },

      // 获取 选手 评分详情
      async getPersonScoreDetail(contestId, personId) {
        let res = await getPersonScoreDetail(contestId, personId)
        try {
          if (res.code == 1000 && res.message == 'success') {
            for (let i in res.data.personScoreList) {
              if (res.data.personScoreList[i].judgeId == this.myJudgeId) {
                this.my = res.data.personScoreList[i]
              }
            }
            // this.scoreList = res.data.personScoreList
          }
        } catch(err) {
          console.log('获取羊的评分信息失败 : ', err);
        }
      },

      // 查看评分详情
      showScoreDetail(item) {
        this.isShowsScoreDetailDialog = true

        this.scoreDetailForm = item
      },

      // 格式化 评分详情 title
      formatScoreDetailTitle(judgeId) {
        let str = ''
        if(judgeId == this.myJudgeId) {
          str = '我'
        } else {
          str = `评委${judgeId}`
        }

        return `${str} 的评分信息`
      },

      // 刷新 评分
      refreshScore() {
        // 获取 选手评分详情
        this.getPersonScoreDetail(this.contestId, this.personId)

        Toast.success('刷新成功！');
      },

      initScoreForm() {
        this.scoreForm = {
          scissorMarks: null,
          doubleShearing: null,
          sheepBodyClean: null,
          beKindSheep: null,
          maoArrange: null,
        }

        this.activeFormItem = null
        this.pickerColumns = []
        this.isShowPicker = false

        this.my = {}
        this.scoreList = []

        this.isShowDialog = false
        this.isScore = 0

        this.isShowsScoreDetailDialog = false
        this.scoreDetailForm = {}
      },

      showRule() {
        this.getGuiZe(this.contestId)
        this.isShowRuleDialog = true
      },

      // 获取 评分规则
      async getGuiZe(contestId) {
        let res = await getGuiZe(contestId)
        try {
          if (res.code == 1000 && res.message == 'success') {
            this.rule = res.data.guiZeContent
          }
        } catch(err) {
          console.log('获取评分规则失败 : ', err);
        }
      },

      goToPage(path) {
        this.initScoreForm()
        this.$router.push(path)
      }
    }
  }
</script>

<style>
  .score_form > .van-form > .van-cell::after { left: 0; right: 0; }
  .score_form > .van-form > .van-cell:nth-child(1) {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .score_form > .van-form > .van-cell:nth-last-child(2) {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  .van-button--large { height: 60px; }

  .van-cell__title > span { font-size: 1rem !important; }
  .van-cell { padding: 20px 10px; }
  .van-field__body > input { font-size: 1rem !important; }
  .van-dialog__header { font-size: 1rem !important; }
  .van-button__text { font-size: 1rem !important; }
</style>